<template>
    <Waterfall :list="list" :lazyload="true" :crossOrigin="false" :breakpoints="breakpoints" :width="332"
        :gutter="gutter" :backgroundColor="backgroundColor" :loadProps="loadProps">
        <!-- v2.6.0之前版本插槽数据获取 -->
        <!-- <template #item="{ item, url, index }"> -->
        <!-- 新版插槽数据获取 -->
        <template #default="{ item, url, index }">
            <li class="image-boxs" v-show="!item.not_like_show">
                <div class="list-model-collect" v-if="item.originate == 1">
                    <span>创意Pro</span>
                </div>
                <div class="model-contrast" v-if="userInfo.isLogin()">
                    <div class="not-like-operate" v-if="!item.not_like" @click="productCareClick(item.id, index)">
                        <el-icon :color="item.is_collect ? 'red' : ''">
                            <component is="StarFilled"></component>
                        </el-icon>
                        <span class="balloon-tips not-like-btn">{{ item.is_collect ? '取消收藏' : '收藏' }}</span>
                    </div>
                    <div class="not-like-operate" @click="notLikeClick(item.id, index)" v-if="!item.not_like">
                        <el-icon>
                            <component is="Close"></component>
                        </el-icon>
                        <div class="balloon-tips">
                            <div class="not-like-btn">不喜欢</div>
                        </div>
                    </div>
                </div>
                <a class="image-boxs-mask" @click="productDetailClick(item.id, item.ascription)">
                    <!-- :style="{ height: item.height + 'px' }"-->
                    <div class="cover-images">
                        <LazyImg class="load_img" :url="item.image_url" />
                        <!-- <img class="load_img" :src="item.image_url" /> -->
                        <div class="not-like-css" style="z-index: 99999999;" v-if="item.not_like">
                            <div class="not-like-content">
                                <div class="not-like-text">该素材已屏蔽</div>
                                <div class="not-like-cancel-btn" @click.stop="notLikeClick(item.id, index)">取消不喜欢</div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="waterfall-information" style="color: #ffffff; text-align: center;">{{ item.title }}
                    </div> -->
                </a>
            </li>
       
        </template>

    </Waterfall>
    <!-- <div style="background-color: red; height: 100px; border-radius: 12px; display: flex; justify-content: center; align-items: center;"><div>您还没有开通会员</div></div> -->
</template>
<script>
import { computed, ref, nextTick, onUnmounted, onMounted } from 'vue'
import { useUserInfo } from '../stores/userInfo'
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import { productCare, notLike } from '../api/home/index'
import { ElMessage } from 'element-plus';
import router from '../router'
import { encrypt, DEFAULTKEY } from '../utils/keyEnum'
import { Md5 } from 'ts-md5'
import { useSiteConfig } from '../stores/siteConfig'

export default {

    props: {
        productList: Array,
        gutter: Number
    },
    components: {
        Waterfall, LazyImg
    },
    setup(props) {
        const list = computed(() => {
            return props.productList
        })
        const error = useSiteConfig().defalut_product_img
        const loadProps = ref({
            error
        })

        const backgroundColor = "#1a1a1a";
        const breakpoints = ref({
            1400: {
                //当屏幕宽度小于等于1200
                rowPerView: 3,
            },
            800: {
                //当屏幕宽度小于等于800
                rowPerView: 2,
            },
            500: {
                //当屏幕宽度小于等于500
                rowPerView: 1,
            },
        })
        const userInfo = useUserInfo() //获取用户信息
        //收藏取消收藏
        const productCareClick = (id, index) => {
            productCare({ id: id }).then(res => {
                if (res.code == 1) {
                    list.value[index].is_collect = !list.value[index].is_collect
                    ElMessage.success(list.value[index].is_collect ? '收藏成功' : '取消收藏成功')
                }
            })
        }
        //喜不喜欢
        const notLikeClick = (id, index) => {
            notLike({ id: id }).then(res => {
                list.value[index].not_like = !list.value[index].not_like
            })
        }
        //详情跳转
        const productDetailClick = (id, ascription) => {
            const queryToAse = encrypt({
                    product_id: id,
                    ascription: ascription
                }, DEFAULTKEY)
                nextTick(() => {
                    const resolvedRoute = router.resolve({
                    name: '/product-detail',

                    query: { value: queryToAse }

                    });

                    window.open(resolvedRoute.href, '_blank');
                    // router.push({ name: '/product-detail', query: { value: queryToAse } })
                });
            // if (userInfo.isLogin()) {
            //    if(userInfo.user_type > 0){
            //     const queryToAse = encrypt({
            //         product_id: id,
            //         ascription: ascription
            //     }, DEFAULTKEY)
            //     nextTick(() => {
            //         router.push({ name: '/product-detail', query: { value: queryToAse } })
            //     });
            //    }else{
            //     ElMessage.error("您当前还不是会员")
            //    }
            // }else{
            //     ElMessage.error("请登录")
            // }
        }
        return {
            breakpoints,
            list,
            userInfo, productCareClick, notLikeClick, productDetailClick, loadProps, error, backgroundColor
        }
    }
}

</script>
<style scoped></style>